<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/notice-vue.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
        <h2>{{message}}</h2>

        <div v-show="listNoticeDiv"><!--内容列表区-->
            <button class="btn btn-primary" @click="doShowOrHide">新增</button>
            <!-- Contextual button for informational alert messages -->
            <button class="btn btn-danger">{{del}}</button>
            <form id="Noticeform-find">
                <input type="text" placeholder="输入查询内容..." name="title" id="titleId">
                <input type="button" class="btn btn-info" value="查询" @click="doQueryNotices">
            </form>
            <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="ids" v-model="picked"></th>
                        <th>{{serialnum}}</th>
                        <th>{{titles}}</th>
                        <th>{{types}}</th>
                        <th>{{statuss}}</th>
                        <th>{{createdUsers}}</th>
                        <th>{{createdTime}}</th>
                        <th>{{operation}}</th>
                    </tr>
                </thead>
                <tbody>
                <tr v-for="(n,i) in notices" :key="i">
                    <td><input type="checkbox" id="ide" v-model="picked"></td>
                    <td>{{i+1}}</td>
                    <td>{{n.title}}</td>
                    <td>{{n.type=='1'?"通知":"公告"}}</td>
                    <td>{{n.status=='0'?"正常":"关闭"}}</td>
                    <td>{{n.createdUser}}</td>
                    <td>{{n.createdTime}}</td>
                    <td>
                        <button class="btn btn-danger" @click="doDeleteById(n.id)">{{del}}</button>
                        <button class="btn btn-info" @click="doFindById(n.id)">{{update}}</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <div class="pagination">
                <button class="pre" @click="doJumpToPage">{{pre}}</button>
                <span class="percent">{{pageCurrent}}/{{pageCount}}</span>
                <button class="next" @click="doJumpToPage">{{next}}</button>
                <form class="form-button" id="pageForm">
                    <input type="text" name="pageCurrent" id="pageNumId">
                    <input type="button" value="跳转" class="jump" @click="doJumpToPage">
                </form>
            </div>
        </div>

    <div id="notice-redact" v-show="editNoticeDiv">
        <form id="noticeEditForm">
            <input type="hidden" id="id" v-model="id">
            <div class="form-group">
                <label for="typeId" >{{types}}</label>
                <select class="form-control" id="typeId" v-model="type">
                    <option value="1">{{inform}}</option>
                    <option value="2">{{announ}}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="tId">{{titles}}</label>
                <input type="text" v-model="title" class="form-control" id="tId" placeholder="title">
            </div>
            <div class="form-group">
                <label for="contentId">{{contents}}</label>
                <textarea class="form-control" v-model="content" rows="3" id="contentId" placeholder="content">

                    </textarea>
            </div>
            <div class="form-group">
                <label>{{statuss}}</label>
                <label class="radio-inline">
                    <input type="radio" v-model="status" name="status" value="0" checked>{{normal}}
                </label>
                <label class="radio-inline">
                    <input type="radio" v-model="status" name="status" value="1">{{shut}}
                </label>
            </div>

            <div class="form-group">
                <label for="Creator">{{createdUsers}}</label>
                <input class="form-control" v-model="createdUser" id="Creator" placeholder="Creator">
            </div>

            <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">Submit</button>
            <button type="button" class="btn btn-default cancel" @click="doCancel">Cancel</button>
        </form>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/notice-vue.js"></script>
</body>
</html>